<template>
  <el-dialog
    v-model="openBoole"
    :close-on-click-modal="false"
    custom-class="mydialog"
    width="30%"
    :title="title"
    @close="close"
  >
    <el-form
      ref="openRef"
      :model="openForm"
      :rules="rules"
      label-width="110px"
      size="small"
    >
      <el-form-item
        label="地址类型"
        prop="addressType"
      >
        <el-select
          v-model="openForm.addressType"
          style="width: 100%"
          placeholder="请选择地址类型"
        >
          <el-option
            v-for="item in ddressaData"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="所在地区"
        prop="value"
      >
        <el-cascader
          ref="cascader"
          v-model="openForm.value"
          :popper-append-to-body="false"
          style="width:100%"
          placeholder="请选择地区"
          :options="cityList"
          :props="{ value:'regionCode',label:'regionName' }"
          @change="handlCity"
        />
      </el-form-item>

      <el-form-item
        label="详细位置"
        prop="addressDetail"
      >
        <el-input
          v-model="openForm.addressDetail"
          clearable
          placeholder="请输入详细位置"
        />
      </el-form-item>
      <el-form-item prop="ifDefault">
        <el-checkbox
          v-model="openForm.ifDefault"
          :true-label="2"
          :false-label="1"
        >设为默认收货地址</el-checkbox>
      </el-form-item>
    </el-form>

    <template #footer>
      <div
        class="dialog-footer"
        style="display:flex;justify-content:center;align-items:center;"
      >
        <el-button
          class="border-btn"
          size="small"
          style="margin-right: 20px;"
          @click="close"
        >取消</el-button>
        <el-button
          v-if="title === '新建地址'"
          class="border-btn"
          size="small"
          style="margin-right: 20px;"
          @click="handlSave"
        >保存并新建</el-button>
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="handlSubmit"
        >保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, inject, reactive, ref, toRefs,} from 'vue'
import {crmStore} from '@CRM/store'
import area from '@/utils/area'
import {useRoute} from 'vue-router'

export default {
  props: {
    title: {
      type: String,
      default: () => {
        return '新建地址'
      },
    },
  },
  setup(props, context) {
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      openForm: {
        addressType: '', // 地址类型
        addressDetail: '', // 地址详情
        ifDefault: 1, // 是否默认收货地址  否 1  是 2
        value: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        modelType: '',
        relationId: Number(route.query.id),
      },
      cityList: area,
      ddressaData: crmStore.getters['dictionary/getDictionary']['address_type'],
      openBoole: false,
      openRef: null,
      rules: {
        addressType: [
          { required: true, message: '请选择地址类型', trigger: 'change' },
        ],
        value: [{ required: true, message: '请选择地区', trigger: 'change' }],
        addressDetail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
      },
      cascader: null,
    })
    const close = () => {
      data.openBoole = false
      remove()
    }

    const remove = () => {
      data.openForm = {
        addressType: '', // 地址类型
        addressDetail: '', // 地址详情
        ifDefault: 1, // 是否默认收货地址  否 1  是 2
        value: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        modelType: '',
        relationId: Number(route.query.id),
      }
      data.openRef.clearValidate()
      data.openRef.resetFields()
    }

    const open = (val, vallue) => {
      data.openForm = {
        addressType: '', // 地址类型
        addressDetail: '', // 地址详情
        ifDefault: 1, // 是否默认收货地址  否 1  是 2
        value: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        modelType: '',
        relationId: Number(route.query.id),
      }
      data.openBoole = true
      data.openForm.modelType = vallue
      if (val) {
        data.openForm = JSON.parse(JSON.stringify(val))
        data.openForm.id = val.id
        data.openForm.value = [val.provinceCode, val.cityCode, val.areaCode]
      }
    }

    const handlCity = (val) => {
      if (val) {
        data.openForm.provinceCode = val[0]
        data.openForm.cityCode = val[1]
        data.openForm.areaCode = val[2]
      }
    }

    const handlSave = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          api.terminal.CUSTOMER_CREATE(data.openForm).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '创建成功',
              })
              context.emit('succsess')
              remove()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        }
      })
    }

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          const commit = ref(undefined)
          const msgs = ref('')
          if (data.openForm.id) {
            commit.value = api.terminal.CUSTOMER_UPDATE
            msgs.value = '修改成功'
          } else {
            commit.value = api.terminal.CUSTOMER_CREATE
            msgs.value = '创建成功'
          }
          commit.value(data.openForm).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: msgs.value,
              })
              context.emit('succsess')
              close()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        }
      })
    }

    return {
      ...toRefs(data),
      close,
      remove,
      open,
      handlCity,
      handlSave,
      handlSubmit,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
